<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
import jsBridge from './bridge.ts'

interface Todo {
    id: number
    title: string
    completed: boolean
    order: number
    createdAt: Date
    updatedAt: Date
}

const newTodo = ref<string>('')
const items = ref<Todo[]>([])

onMounted(async () => {
    items.value = await jsBridge.todos.findAll()
    await nextTick()
    await jsBridge.window.active()
})

const addTodo = async () => {
    const data = await jsBridge.todos.create({ title: newTodo.value })
    items.value.push(data)
    newTodo.value = ''
}

const handleToggle = async (id: number, newValue: boolean) => {
    await jsBridge.todos.update(id, { completed: newValue })
}

const removeTodo = async (id: number) => {
    items.value = items.value.filter((item) => item.id !== id)
    await jsBridge.todos.remove(id)
}

const removeCompleted = async () => {
    const ids = items.value.filter((item) => item.completed).map((item) => item.id)
    items.value = items.value.filter((item) => !item.completed)
    await jsBridge.todos.batchRemove(ids)
}
</script>

<template>
    <div class="text-center text-5xl mt-4 color-red">TODOS</div>
    <div class="p-4">
        <v-card>
            <v-text-field
                v-model="newTodo"
                hide-details="auto"
                label="New Todo"
                @keydown.enter="addTodo"
            />
            <v-list>
                <v-list-item v-for="item in items" :key="item.id" :value="item.id">
                    <template #title>
                        <v-list-item-title>
                            <span
                                :style="{
                                    textDecoration: item.completed ? 'line-through' : 'none',
                                    color: item.completed ? 'rgba(0, 0, 0, 0.5)' : 'inherit'
                                }"
                            >
                            {{ item.title }}
                          </span>
                        </v-list-item-title>
                    </template>
                    <template #prepend>
                        <v-checkbox-btn
                            v-model:model-value="item.completed"
                            @update:model-value="(v) => handleToggle(item.id, v)"
                        />
                    </template>
                    <template #append>
                        <v-icon @click.stop="removeTodo(item.id)">mdi-close</v-icon>
                    </template>
                </v-list-item>
            </v-list>
            <v-divider></v-divider>
            <div class="flex justify-between">
                <div class="flex items-center ml-5 color-gray">
                    {{ items.filter((item) => !item.completed).length }} items left
                </div>
                <v-btn variant="text" @click="removeCompleted" color="blue"> Clear completed</v-btn>
            </div>
        </v-card>
    </div>
</template>

<style scoped></style>
